<template>
  <div style="display: flex;">
    <sort
      v-for="item in list"
      :key="`sort-${item.value}`"
      :title="item.name"
      :value="item.value"
      :select-sort="selectSort"
      @change-state="changeState"
    />
  </div>
</template>

<script>
import Sort from './Sort.vue'

export default {
  name: 'SortGroup',
  components: { Sort },
  model: {
    // 双向绑定
    event: 'change',
  },
  props: {
    list: Array,
    value: Object,
  },
  data() {
    return {
      selectSort: this.value,
    }
  },
  computed: {},
  mounted() {},
  created() {},
  methods: {
    changeState(info) {
      this.selectSort = info
      this.$emit('change', info)
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped></style>
